<template>
	<view class="wrap">
		<view class="pad-20 box">
			<view class="fc-33 fs-32 text-fw item">酒店印象</view>
			<view class="item flex column">
				<view class="flex mar-bot-16">
					<text class="text">设&nbsp;施</text>
					<sunui-star :defaultStar="commentlist.deviceStar" :maxStar="5" :starSize='"1.4em"' @changeStar="changeStar($event,1)" class='sunui-star star' />
					<view class="desc flex jce">
						<text>{{deviceDesc}}</text>
					</view>
				</view>
				<view class="flex mar-bot-16">
					<text class="text">服&nbsp;务</text>
					<sunui-star :defaultStar="commentlist.serviceStar" :maxStar="5" :starSize='"1.4em"' @changeStar="changeStar($event,2)" class='sunui-star star' />
					<view class="desc flex jce">
						<text>{{serviceDesc}}</text>
					</view>
				</view>
				<view class="flex mar-bot-16">
					<text class="text">卫&nbsp;生</text>
					<sunui-star :defaultStar="commentlist.hygieneStar" :maxStar="5" :starSize='"1.4em"' @changeStar="changeStar($event,3)" class='sunui-star star' />
					<view class="desc flex jce">
						<text>{{hygDesc}}</text>
					</view>
				</view>
				<view class="flex mar-bot-16">
					<text class="text">位&nbsp;置</text>
					<sunui-star :defaultStar="commentlist.locationStar" :maxStar="5" :starSize='"1.4em"' @changeStar="changeStar($event,4)" class='sunui-star star' />
					<view class="desc flex jce">
						<text>{{locationDesc}}</text>
					</view>
				</view>
				<view class="splite-line-solid"></view>
			</view>
			<view class="item">
				<textarea name="comment" id="comment" v-model="commentlist.content" placeholder="今天也是元气满满的一天,快和大家分享你的入住体验吧~" maxlength="50" class="textarea"></textarea>
			</view>
			<view class="item">
				<view class="fc-99 fs-24">每个图片大小不超过10M，最多可上传5个文件</view>
				<view class="module-image">
					<view class="image_view" v-for="(item, index) in picArr" :key="index" v-if="picArr.length > 0">
						<image :src="item" class="release_img" @click="previewImg(index)"></image>
						<view class="img_delete center-algin" @click="deleteImg(index)"><text class="text-white text-size-base text-color-inverse">X</text></view>
					</view>
					<view class="release_img center-algin" @click="uploadImgs()" v-if="picArr.length < 5"><text class="add">+</text></view>
				</view>
			</view>
			<view class="item">
				<checkbox-group @change="checkboxChange">
					<label v-for="item in items" :key="item.value">
						<view>
							<checkbox style="transform: scale(0.7);" :value="item.value" :checked="item.checked" />{{item.name}}
						</view>
					</label>
				</checkbox-group>
			</view>
			<view class="item">
				<button class="f-confirm" @click.stop="confirm">提交</button>
			</view>
		</view>
		
	</view>
</template>
<script>
	import SunuiStar from '@/components/sunui-star/sunui-star.vue'
	import uploadImage from '@/common/ossutil/uploadFile';
	import { mapState } from 'vuex'
	export default {
		components:{
			SunuiStar
		},
		data() {
			return {
				commentlist: {
					hotelId:'',
					hotelSubId:'',
					hotelName:'',
					orderId:'',
					content: '', //评价内容
					deviceStar: 5, //设施评价星数：0->5
					serviceStar: 5, //服务评价星数
					hygieneStar: 5, //卫生评价数
					locationStar: 5, //位置评价星数
					pics: '', //上传图片地址，以逗号隔开。最多5张
					userId: '',
					userOpenId: '',
					userNickname:'',
					userIcon:'',
					anonymous: 0
				},
				items: [{
					name: '匿名评价',
					value: '1',
					checked: false
				}],
				picArr:[],

			};
		},
		computed:{
			...mapState(["userInfo"]),
			deviceDesc() {
				return this.getStarDesc(this.commentlist.deviceStar)
			},
			serviceDesc() {
				return this.getStarDesc(this.commentlist.serviceStar)
			},
			hygDesc() {
				return this.getStarDesc(this.commentlist.hygieneStar)
			},
			locationDesc() {
				return this.getStarDesc(this.commentlist.locationStar)
			}
		},
		onLoad(option) {
			var orderInfo = JSON.parse(decodeURIComponent(option.orderInfo));
			console.log("orderInfo",orderInfo)
			this.commentlist.hotelId = orderInfo.hotelId
			this.commentlist.hotelSubId = orderInfo.hotelSubId
			this.commentlist.hotelName = orderInfo.hotelName
			this.commentlist.orderId = orderInfo.orderId,
			this.commentlist.userId = this.userInfo.id
			this.commentlist.userOpenId = this.userInfo.openid
			this.commentlist.userNickname = this.userInfo.nickname
			this.commentlist.userIcon = this.userInfo.avatar
		},
		mounted() {},
		methods: {
			async confirm() {
				console.log("提交的评价信息,",this.commentlist)
				let res = await this.$apis.addComment(this.commentlist)
				if(res) {
					uni.showToast({
						title:"提交成功",
						icon:'none'
					})
					uni.navigateBack({
						delta: 1
					})
				}
			},
			getStarDesc(star) {
				if(star == 1) {
					return "很差"
				}
				if(star == 2) {
					return "较差"
				}
				if(star == 3) {
					return "一般"
				}
				if(star == 4) {
					return "比较满意"
				}
				if(star == 5) {
					return "非常满意"
				}
			},
			checkboxChange(e) {
				var items = this.items,
				values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
						this.commentlist.anonymous = 1;
					}else{
						this.$set(item,'checked',false)
						this.commentlist.anonymous = 0;
					}
				}
				console.log(this.commentlist)
			},
			changeStar(e,index) {
				if(index == 1) {
					this.commentlist.deviceStar = e.curStar
					return;
				}
				if(index == 2) {
					this.commentlist.serviceStar = e.curStar
					return;
				}
				if(index == 3) {
					this.commentlist.hygieneStar = e.curStar
					return;
				}
				if(index == 4) {
					this.commentlist.locationStar = e.curStar
					return;
				}
			},
			// 选择图片
			uploadImgs() {
				let that = this;
				uni.chooseImage({
					count:5 - that.picArr.length,
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						that.tmpImageUrl = tempFilePaths[0];
						that.uploadFile();
					}
				});
			},		
			// logo上传图片
			uploadFile() {
				uni.showLoading({title: '图片上传中'});
				uploadImage(0,this.tmpImageUrl, 'hotel/comment/', result => {
					this.picArr = this.picArr.concat([result]);
					this.commentlist.pics = this.picArr.toString()
					console.log("arr",this.picArr,"pics",this.commentlist.pics)
					uni.hideLoading();
				});
			},
			// 查看图片
			previewImg(index) {
				uni.previewImage({
					indicator: 'number',
					loop: true,
					current: this.picArr[index],
					urls: this.picArr
				});
			},
			// 删除图片
			deleteImg(index) {
				this.picArr.splice(index, 1);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
		background-color: #f5f5f5;
		
		.box {
			background-color: #fff;
			width: 100%;
			box-sizing: border-box;
			padding: 30upx 30upx 50upx 30upx;
			border-radius: 20upx;
			.item {
				margin-bottom: 20upx;
				.text {
					color: #424242;
				}
			}
			.star {
				width: 360upx;
			}
			.textarea {
				width: 100%;
				height: 80upx;
			}
			.desc {
				color: #a0a0a0;
			}
		}
		.module-image {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 20upx 0;
			view {
				display: flex;
			}
		}
			
		.release_img {
			width: 180upx;
			height: 180upx;
			margin-left: 20upx;
			margin-bottom: 10upx;
			background-color: #f8f8f8;
		}
		.add{
			color: #cecece;
			font-size: 80upx;
		}
		.image_view {
			position: relative;
		}
		
		.img_delete {
			width: 45upx;
			height: 45upx;
			border-radius: 50%;
			background: rgba(234, 178, 178, 0.5);
			position: absolute;
			right: -15upx;
			top: -15upx;
			z-index: 10;
		}
		
	}
</style>
